<template>
    <div class="book-search">
        <!-- 现代化标题区域 -->
        <div class="title-container flex items-center mb-6">
            <div class="book-icon bg-teal-500 p-1.5 rounded-lg shadow-lg mr-3 flex items-center justify-center">
                <svg t="1749146441294" class="icon" viewBox="0 0 1210 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="4477" xmlns:xlink="http://www.w3.org/1999/xlink" width="32"
                    height="32">
                    <path
                        d="M183.687107 1023.999958H38.963932a38.963932 38.963932 0 0 1-38.963932-38.963932V38.963932A38.963932 38.963932 0 0 1 38.963932 0h144.723175a38.963932 38.963932 0 0 1 38.963932 38.963932v946.072094a38.963932 38.963932 0 0 1-38.963932 38.963932z m-139.156899-44.530207h133.590623V44.530208H44.530208zM450.951847 1023.999958H306.145178a38.963932 38.963932 0 0 1-38.963932-38.963932V38.963932a38.963932 38.963932 0 0 1 38.963932-38.963932h144.723175a38.963932 38.963932 0 0 1 38.963932 38.963932v946.072094a38.963932 38.963932 0 0 1-38.880438 38.963932z m-139.156899-44.530207h133.590623V44.530208H311.711454z"
                        fill="#333333" p-id="4478"></path>
                    <path
                        d="M550.620305 159.603932l154.281267-89.074331 489.734875 848.245686-154.281267 89.074331-489.734875-848.245686Z"
                        fill="#FF505E" p-id="4479"></path>
                    <path
                        d="M1046.52946 1023.999958a38.963932 38.963932 0 0 1-33.801211-19.481966L539.692202 185.203917a38.963932 38.963932 0 0 1 14.263582-53.227514l125.366451-72.361587a38.963932 38.963932 0 0 1 53.213598 14.263582l473.036047 819.300159a38.963932 38.963932 0 0 1-14.263582 53.227514l-125.36645 72.361588a38.671702 38.671702 0 0 1-19.412388 5.232299z m-465.493743-856.2324L1048.505488 977.43806l115.722878-66.795312L696.758594 100.944415z"
                        fill="#333333" p-id="4480"></path>
                </svg>
            </div>
            <h2 class="section-title text-2xl font-bold text-gray-800">图书搜索</h2>
        </div>

        <!-- 搜索栏 -->
        <div class="search-bar flex items-center space-x-4 mb-6">
            <input v-model="isbn" type="text" placeholder="输入 ISBN 模糊查询" class="input-field flex-1" />

            <input v-model="name" type="text" placeholder="输入书名模糊查询" class="input-field flex-1" />

            <button @click="searchBooks" class="search-btn">
                {{ loading ? '搜索中...' : '搜索' }}
                <i class="ml-2 fa fa-search"></i>
            </button>
        </div>

        <!-- 加载状态 -->
        <div v-if="loading" class="loading-indicator flex items-center justify-center mb-4">
            <div class="spinner-border text-blue-500" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
        </div>

        <!-- 表格 -->
        <div class="table-container overflow-x-auto">
            <table class="book-table min-w-full">
                <thead>
                    <tr>
                        <th class="table-header">ISBN</th>
                        <th class="table-header">书名</th>
                        <th class="table-header">价格</th>
                        <th class="table-header">上架时间</th>
                        <th class="table-header">状态</th>
                    </tr>
                </thead>

                <tbody>
                    <!-- 空数据提示 -->
                    <tr v-if="books.length === 0" class="empty-row">
                        <td colspan="5" class="text-center text-gray-500">
                            <i class="fa fa-book text-3xl mb-2 text-gray-300"></i>
                            <p>暂无符合条件的图书</p>
                        </td>
                    </tr>

                    <!-- 数据行 -->
                    <tr v-for="book in books" :key="book.isbn" class="hover-row">
                        <td class="table-cell">{{ book.isbn }}</td>
                        <td class="table-cell">{{ book.bname }}</td>
                        <td class="table-cell">{{ book.price }} 元</td>
                        <td class="table-cell">{{ formatDate(book.ontime) }}</td>
                        <td class="table-cell status-cell" :style="{ color: getStatusColor(book.status) }">
                            {{ book.status }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const isbn = ref('')
const name = ref('')
const books = ref([])
const loading = ref(false)

onMounted(() => {
    searchBooks()
})

const searchBooks = async () => {
    loading.value = true

    try {
        const response = await axios.get('/api/books', {
            params: {
                isbn: isbn.value.trim(),
                name: name.value.trim()
            }
        })

        books.value = response.data || []
    } catch (error) {
        console.error('图书搜索失败:', error)
    } finally {
        loading.value = false
    }
}

const formatDate = (isoDate) => {
    if (!isoDate) return '--'
    return new Date(isoDate).toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
    })
}

const getStatusColor = (status) => {
    return status === '可借' ? '#4CAF50' : status === '已借' ? '#F44336' : '#607D8B'
}
</script>

<style scoped>
/* 现代化标题区域样式 */
.title-container {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.book-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.book-icon:hover {
    transform: rotate(5deg) scale(1.05);
}

.section-title {
    margin: 0;
    background: linear-gradient(90deg, #00695C, #00ACC1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

/* 搜索栏样式 */
.search-bar {
    display: flex;
    gap: 1.5rem;
}

.input-field {
    padding: 0.8rem 1.2rem;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    font-size: 1rem;
    flex-grow: 1;
    transition: border-color 0.3s ease;
}

.input-field:focus {
    border-color: #00BCD4;
    box-shadow: 0 0 8px rgba(0, 188, 200, 0.2);
}

.search-btn {
    padding: 0.8rem 2rem;
    background-color: #00BCD4;
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.search-btn:hover {
    background-color: #0097A7;
}

/* 表格样式 */
.book-table {
    width: 100%;
    border-collapse: collapse;
}

.table-header {
    padding: 1rem;
    text-align: left;
    background-color: #F5F5F5;
    color: #455A64;
    font-weight: 500;
    border-bottom: 2px solid #E0E0E0;
}

.table-cell {
    padding: 1rem;
    border-bottom: 1px solid #F0F0F0;
}

.hover-row:hover {
    background-color: #F8F9FA;
}

.status-cell {
    font-weight: 500;
}

/* 加载动画 */
.spinner-border {
    width: 1.2rem;
    height: 1.2rem;
}
</style>